<template>
  <div>
    <!-- 我想要在这里有一个头部组件 -->
    <headerMiddle title="编辑资料"></headerMiddle>
    <div class="avatar">
      <img class="avatar-img" :src="profile.head_img" alt />
       <van-uploader :after-read="afterRead" class='fileUploader'/>
    </div>
    <cellBar label="昵称" :desc="profile.nickname" @jum="isShowNickname = true" />
    <cellBar label="密码" desc="*****" @jum="isShowPwd = true"/>
    <cellBar label="性别" :desc="profile.gender" @jum="isShowGender = true"/>
    <van-dialog v-model="isShowNickname" title="编辑昵称" show-cancel-button @confirm="editProfile({
          nickname: newNickname
        })">
      <van-field v-model="newNickname" placeholder="请输入昵称" />
    </van-dialog>
    <van-dialog v-model="isShowPwd" title="编辑密码" show-cancel-button @confirm="editProfile({
        password: newPwd
    })">
      <van-field type="password" v-model="newPwd" placeholder="请输入密码" />
    </van-dialog>
    <van-action-sheet v-model="isShowGender" :actions="genderList" @select="selectGender"  cancel-text="取消" />
      <!-- after-read 在选择完图片之后会被触发 -->
   
  </div>
</template>

<script>
// 引入组件
import headerMiddle from "../components/headerMiddle";
import cellBar from "../components/cellBar";
export default {
  // 注册组件
  components: {
    headerMiddle,
    cellBar
  },
  data() {
    return {
      //创建数据接收服务器返回的数据，渲染页面
      profile: {},
      // 设置插件默认为隐藏状态
      isShowNickname: false,
      isShowPwd: false,
      isShowGender: false,
      // 设置密码和昵称的默认值
      newNickname: "",
      newPwd: "",
      //设置上拉菜单选项
      genderList: [
           { name: '男',color:'skyblue'},
            { name: '女' ,color:"pink"},
      ]
    };
  },
  methods: {
     // 封装一个发送axios获取数据的方法,获取数据渲染页面
      loadPage(){
          this.$axios({
      url: "/user/" + localStorage.getItem("user_id"),
      method: "GET",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {
      this.profile = res.data.data;
      // 在渲染之前处理服务器返回的数据，判断1是男的还是女的
      this.profile.gender = this.profile.gender == 0 ? "女" : "男";
      // 在渲染之前，处理判断数据里面图片是否有，有的话加服务器地址加返回的图片地址在页面渲染，没有的话给它一个默认图片
      if (!this.profile.head_img) {
        this.profile.head_img = "/static/imgs/touxian.jpg";
      } else {
        this.profile.head_img =
          this.$axios.defaults.baseURL + this.profile.head_img;
      }
    });
    },
    // 上传头像方法
    afterRead(fileItem){
      console.log(fileItem);
      // 这里是选择完图片后的回调方法,我们想要的图片就在
      // fileItem.file
      // 只需要将这个问天转换成 api 要求的二进制形式,发送 ajax 请求即可
      // 我们使用一个对象 FormData 将数据转换为二进制形式
      const data = new FormData();
      // 我们要将刚刚拿到的图片放入这个二进制对象的 file 字段里面
      data.append('file',fileItem.file);
       // 这个 data 对象就是一个可以直接上传的数据
      //  发送axios
       this.$axios({
                url: '/upload',
                method: 'post',
                data: data,
                headers: {
                    Authorization: localStorage.getItem('token')
                }
            }).then(res=>{
                console.log(res.data);
                // 这里文件上传完毕
                // 文件上传仅仅是上传了文件并返回了 url 
                // 但是并没有修改用户的信息
                // 所以我们要调用 editProfile 方法 修改 head_img
                // 这个时候我们的图片地址在 res.data.data.url
                this.editProfile({
                    head_img: res.data.data.url
                });
            })
    },
    // 选中上拉菜单触发的方法
    selectGender(item){
           console.log('你选择了' + item.name);
          //  调用这个方法，通过传参，发送阿贾克斯修改服务器数据
           this.editProfile({
            //  判断插件选的男是1，否则女的是0，因为服务器返回给我们渲染的也是0和1，所以我们也要转换成0或者1
               gender: item.name == '男' ? 1 : 0
           })
          //  选中后隐藏上拉菜单
           this.isShowGender = false
          //  调用方法重新渲染页面
           this.loadPage();
    },
    // 发送阿贾克斯更改用户 数据
    editProfile(newData) {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("user_id"),
        method: "POST",
        data: newData,
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }).then(res=>{
        // 修改完毕，清空插件里面输入的数值
          this.newNickname = "";
          this.newPwd = "";
          // 提示用户修改成功
         this.$toast.success(res.data.message)
          console.log(res);
          // 调用方法重新渲染页面
          this.loadPage();
         
      })
    }
  },
  mounted() {
    // 挂载完毕调用方法渲染页面
    this.loadPage();
  }
};
</script>

<style lang="less" scoped>
.avatar {
  padding: 8.333vw;
  text-align: center;
  position: relative;
}
.avatar-img {
  width: 19.444vw;
  // height: 19.444vw;
  border-radius: 50%;
}
.fileUploader{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

</style>